<template>
  <div class="debug-test">
    <h1>调试测试页面</h1>
    <p>测试App.vue的复杂逻辑</p>
    
    <div class="test-section">
      <h3>用户状态测试</h3>
      <p>登录状态: {{ userStore.isLoggedIn ? '已登录' : '未登录' }}</p>
      <p>Token: {{ userStore.token ? '存在' : '不存在' }}</p>
      <p>用户ID: {{ userStore.userId }}</p>
      <p>用户名: {{ userStore.username }}</p>
      <p>权限: {{ userStore.permissions ? userStore.permissions.length : 0 }} 个</p>
      <p>角色: {{ userStore.roles ? userStore.roles.length : 0 }} 个</p>
    </div>
    
    <div class="test-section">
      <h3>路由测试</h3>
      <p>当前路由: {{ route.path }}</p>
      <p>路由名称: {{ route.name }}</p>
      <p>路由参数: {{ JSON.stringify(route.params) }}</p>
      <p>路由查询: {{ JSON.stringify(route.query) }}</p>
    </div>
    
    <div class="test-section">
      <h3>功能测试</h3>
      <button @click="testUserStore">测试用户Store</button>
      <button @click="testRouter">测试路由</button>
      <button @click="testLocalStorage">测试LocalStorage</button>
      <button @click="clearLocalStorage">清除LocalStorage</button>
    </div>
    
    <div class="test-results">
      <h3>测试结果:</h3>
      <div v-for="(result, index) in testResults" :key="index" :class="result.type">
        {{ result.time }}: {{ result.message }}
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import { useUserStore } from '@/stores/userStore'

const route = useRoute()
const userStore = useUserStore()
const testResults = ref([])

onMounted(() => {
  addResult('调试页面加载成功', 'success')
  addResult(`用户登录状态: ${userStore.isLoggedIn}`, 'info')
  addResult(`当前路由: ${route.path}`, 'info')
})

const addResult = (message, type = 'info') => {
  testResults.value.push({
    time: new Date().toLocaleTimeString(),
    message,
    type
  })
}

const testUserStore = () => {
  try {
    addResult('用户Store测试开始', 'info')
    addResult(`Token: ${userStore.token}`, 'info')
    addResult(`用户ID: ${userStore.userId}`, 'info')
    addResult(`用户名: ${userStore.username}`, 'info')
    addResult(`权限数量: ${userStore.permissions ? userStore.permissions.length : 0}`, 'info')
    addResult(`角色数量: ${userStore.roles ? userStore.roles.length : 0}`, 'info')
    addResult('用户Store测试完成', 'success')
  } catch (error) {
    addResult(`用户Store测试失败: ${error.message}`, 'error')
  }
}

const testRouter = () => {
  try {
    addResult('路由测试开始', 'info')
    addResult(`路径: ${route.path}`, 'info')
    addResult(`名称: ${route.name}`, 'info')
    addResult(`参数: ${JSON.stringify(route.params)}`, 'info')
    addResult(`查询: ${JSON.stringify(route.query)}`, 'info')
    addResult('路由测试完成', 'success')
  } catch (error) {
    addResult(`路由测试失败: ${error.message}`, 'error')
  }
}

const testLocalStorage = () => {
  try {
    addResult('LocalStorage测试开始', 'info')
    const keys = Object.keys(localStorage)
    addResult(`LocalStorage键数量: ${keys.length}`, 'info')
    keys.forEach(key => {
      addResult(`键: ${key}, 值: ${localStorage.getItem(key)}`, 'info')
    })
    addResult('LocalStorage测试完成', 'success')
  } catch (error) {
    addResult(`LocalStorage测试失败: ${error.message}`, 'error')
  }
}

const clearLocalStorage = () => {
  try {
    localStorage.clear()
    addResult('LocalStorage已清除', 'success')
  } catch (error) {
    addResult(`清除LocalStorage失败: ${error.message}`, 'error')
  }
}
</script>

<style scoped>
.debug-test {
  padding: 20px;
  max-width: 1000px;
  margin: 0 auto;
  font-family: Arial, sans-serif;
}

h1 {
  color: #333;
  text-align: center;
}

.test-section {
  margin: 20px 0;
  padding: 15px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background: #f9f9f9;
}

.test-section h3 {
  margin-top: 0;
  color: #666;
}

p {
  margin: 5px 0;
  padding: 3px;
  background: #fff;
  border-radius: 2px;
}

button {
  padding: 10px 20px;
  background: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  margin: 5px;
}

button:hover {
  background: #0056b3;
}

.test-results {
  margin-top: 20px;
  padding: 15px;
  background: #f8f9fa;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  max-height: 300px;
  overflow-y: auto;
}

.success {
  color: #28a745;
  margin: 5px 0;
}

.error {
  color: #dc3545;
  margin: 5px 0;
}

.info {
  color: #17a2b8;
  margin: 5px 0;
}
</style> 